<template>
  <a-form :form="form">
    <a-row>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="课程代码"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-input v-decorator="[
            'kch',
            {
              rules: [{ required: true, message: '请输入课程代码!' }],
            }
          ]" :disabled="isEdit" oninput="value=value.replace(/[^\d]/g, '')" @change="kchChange"/>
          <!--<a-input v-if="!isEdit" :value="ccCode + lbCode" style="width: 70%" disabled placeholder="根据层次类别等自动生成"/>-->
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="课程中文名"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-input v-decorator="['kcmc',
            {
              rules: [{ required: true, message: '请输入课程中文名!' }],
            }
          ]" :disabled="isEdit"/>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="课程英文名"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-input v-decorator="['kcywmc',
            {
              rules: [{ required: true, message: '请输入课程英文名!' }],
            }
          ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="所属单位"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-select allowClear v-decorator="['kcssyxm',
            {
              rules: [{ required: true, message: '请选择所属单位!' }],
            }
          ]" showSearch :filterOption="filterOption">
            <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="课程层次"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-select  v-decorator="['kcccm',
            {
              rules: [{ required: true, message: '请选择课程层次!' }],
            }
          ]" @change="ccChange">
            <a-select-option v-for="i in TYPE0300" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="课程类别"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-select  v-decorator="['kclbm',
            {
              rules: [{ required: true, message: '请选择课程类别!' }],
            }]"  @change="lbChange">
            <a-select-option v-for="i in TYPE0359" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="授课方式"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-select  v-decorator="['skfsm']" allowClear>
            <a-select-option v-for="i in TYPE0067" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="考试方式"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-select  v-decorator="['ksfsm']" allowClear>
            <a-select-option v-for="i in TYPE0054" :key="i.id" :value="String(i.code)">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="学分"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-input v-decorator="['xf',
            {
              rules: [{ required: true, message: '请输入学分!' }],
            }]" disabled/>
        </a-form-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-item
          label="学时"
          :labelCol="{span: 7,offset: 1}"
          :wrapperCol="{span: 15, offset: 1}"
        >
          <a-input v-decorator="['zxs',
            {
              rules: [{ required: true, message: '请输入学时!' }],
            }]" disabled/>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['isEdit'],
  data () {
    return {
      selectMenu: {},
      ccCode: '',
      lbCode: ''
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      TYPE0300: state => state.app['TYPE0300'],
      TYPE0359: state => state.app['TYPE0359'],
      TYPE0067: state => state.app['TYPE0067'],
      TYPE0054: state => state.app['TYPE0054']
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0300')
    this.$store.dispatch('app/setDictionary', 'TYPE0359')
    this.$store.dispatch('app/setDictionary', 'TYPE0067')
    this.$store.dispatch('app/setDictionary', 'TYPE0054')
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data
        }
      })
    },
    ccChange (code) {
      this.ccCode = code
    },
    lbChange (code) {
      this.lbCode = code
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    kchChange (e) {
      if(e.target.value.length > 2) {
        const xf = +e.target.value.substring(e.target.value.length-2, e.target.value.length)
        this.form.setFieldsValue({xf, zxs: xf * 16})
      }
      // console.log(e)
    }
  }
}
</script>

<style>

</style>
